<template>
  <el-dialog :visible.sync="visible" title="请选择办理人" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
      :label-width="$i18n.locale === 'en-US' ? '120px' : '140px'">
      <el-form-item v-for="(item, i) in dataForm.assignees" :key="i" :label="item.name" :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' }]">
        <el-select v-model="item.userNames" :multiple="item.multiple" clearable style="width:100%">
          <el-option v-for="(item1, i1) in item.assigneeNextList" :key="i1" :label="item1.realName"
            :value="item1.username"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
  data () {
    return {
      visible: false,
      dataForm: {
        assignees: []
      }
    }
  },
  computed: {
    dataRule () {
      return {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        modelKey: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      console.log('init')
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      console.log(this.dataForm.assignees.length)
      if (this.dataForm.assignees.length === 0) {
        return this.$message.error('请选择办理人')
      }
      this.visible = false
      this.$emit('approverHandle')
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
